<template>
  <div class="classic">
     <ul class="left" ref="scroll_left">
      <li
        v-for="classic in Classices"
        :key="classic.id"
        is="router-link"
        :to="'/classic/cla/' + classic.id"
        tag="li"
      ><div>{{ classic.name }}</div></li>
    </ul>
    <div class="right" ref="scroll_right">
      <router-view />
    </div>
  </div>
</template>

<script>
import { getAllClassic } from '@/api/classic'
export default {
  name: 'Classic',
  data () {
    return {
      Classices: []
    }
  },
  created () {
    getAllClassic()
      .then(res => {
        console.log(res)
        // 将 api 接口中返回的分类数据保存到 classices 数组中。
        this.Classices = res
        var id
        if (this.$route.params.id) {
          id = this.$route.params.id
        } else {
          id = 2
        }
        this.$router.push({
          name: 'cla',
          params: {
            id
          }
        }).catch(() => {})
        // 将参数显示在地址栏
        // this.$router.push({
        //   path: '/classic/cla',
        //   query: {
        //     id: 2
        //   }
        // }).catch(() => {})
      })
  },
  mounted () {
    this.$toast.loading({
      message: '加载中...',
      forbidClick: true
    })
  }
}
</script>

<style lang="scss" scoped>
.classic {
    margin-top: 10px;
    display: flex;
    height: 100%;
    width: 100%;
    .left {
      width: 100px;
      height: 100%;
      position: fixed;
      left:0;
      top:45px;
      overflow: scroll;
      background: #ffffff;
      border-right: 1px solid #dddddd ;
      padding-bottom: 100px;;
      li {
        height: 49px;
        line-height: 49px;
        margin-left: 10px;
        padding-left: 8px;
        text-align: center;
        font-size: 14px;
        div{
          width: 60px;
          height: 23px;
          text-align: center;
          line-height: 20px;
        }
      }
    }
    .right {
      margin-top:40px;
      // overflow-x: hidden;
      flex: 1;
      // 让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容：
      background: #ffffff;
    }
    .router-link-exact-active.router-link-active {
          // margin-left: 10px;
          // width: 80px;
          // height: 30px;
          // border: 1px solid #ff1932;
          // border-radius: 31px 31px;
          // color:#ffffff;
          // background: #ff1932;
          div{
            border: 1px solid #ff1932;
            border-radius: 25px 25px;
            color:#ffffff;
            background: #ff1932;
        }
    }
  }
</style>
